<template>
  <el-card>
    <!-- 标题 -->
    <div style=" font-size: 20px; padding-bottom: .5em; color: red">指标超标报警</div>
    <!-- 表头 -->
    <div class="seamless-head">
      <ul class="head-ul">
        <li class="head-li">
          <span>服务区</span>
          <span>指标</span>
          <span>报警等级</span>
          <span>时间</span>
        </li>
      </ul>
    </div>
    <div style="height: 10px"></div>
    <vue-seamless-scroll :data="listData" class="seamless-warp">
      <ul class="item">
        <li v-for="item in listData">
          <span v-text="item.area"></span>
          <span v-text="item.factor"></span>
          <span v-text="item.level"></span>
          <span v-text="item.time"></span>
        </li>
      </ul>
    </vue-seamless-scroll>
  </el-card>
</template>

<script>
  import vueSeamlessScroll from 'vue-seamless-scroll'

  export default {
    components: {
      vueSeamlessScroll
    },
    data() {
      return {
        listData: []
      }
    },
    methods: {
      // 向后台发送请求，获取指标报警数据
      getIndexAlarm() {
        this.$http.get('/alarm/factor').then(response => {
          this.listData = response.data;
        }).catch(err => {
          console.log((err));
        })
      }
    },
    mounted() {
      this.getIndexAlarm();
    }
  }
</script>

<style lang="scss" scoped>
  .seamless-head {
    overflow: hidden;
  }

  .seamless-head ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
  }

  .seamless-head li {
    height: 20px;
    line-height: 20px;
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: black;
  }

  .seamless-warp {
    height: 229px;
    color: aqua;
    overflow: hidden;
  }

  .seamless-warp ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
  }

  .seamless-warp li {
    height: 20px;
    line-height: 20px;
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: black;
  }

</style>
